<template>
    <header class="header-nav" style="background: #21118D">
        <el-row>
            <el-col :span="14" class='logo-container'>
                <!-- 折叠按钮 -->
                <div class="collapse-btn" @click="collapseChage">
                    <i class="el-icon-menu icon-btn"></i>
                </div>
                <span class="title">宝鸡地震灾害风险调查工作软件平台</span>
            </el-col>
            <el-col :span="10" class="user">
                <div class="userinfo">
                    <div class="btn-fullscreen icon-font">
                        <el-avatar style="margin: 5px 0">user</el-avatar>
                    </div>
                    <div class="welcome">
                        <!--                        <p class="name comename">欢迎</p>-->
                        <p class="name avatarname">{{userName}}</p>
                    </div>
                    <span class='username'>
                        <el-dropdown trigger="click" @command='setDialogInfo'>
                            <span class="el-dropdown-link">
                                <i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command='logout'>退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                </div>
                <div class="btn-fullscreen icon-font">
                </div>
            </el-col>
        </el-row>
    </header>
</template>

<script>
    import bus from '../util/bus'

    export default {
        name: 'header-nav',
        data() {
            return {
                collapse: false, //菜单栏是否闭合
                showlrc: true,
                lockPassword: '',
                userName: this.$store.state.user == undefined ? "" : JSON.parse(this.$store.state.user).userName
            }
        },
        props: {},
        computed: {
            users() { //通过vuex获取用户信息
                return this.$store.state
            }
        },
        methods: {
            logout() {
                this.$store.dispatch("logout");
                this.$router.push('/AdminLogin')
            },
            setDialogInfo(cmditem) {
                switch (cmditem) {
                    case 'info':
                        this.showInfoList();
                        break;
                    case 'logout':
                        this.logout();
                        break;
                }
            },
            showInfoList() {
                //console.log('下拉菜单')
            },
            collapseChage() {
                //点击隐藏左侧菜单栏，
                this.collapse = !this.collapse;
                //非父子组件传值
                bus.$emit('collapse', this.collapse);
            }
        }
    }
</script>
<style scoped>
    .header-nav {
        width: 100%;
        height: 50px;
        color: #fff;
        border-bottom: 1px solid #1f2d3d;
        overflow: hidden;
        padding: 5px 0;
        line-height: 20px;
    }

    .collapse-btn {
        width: 50px;
        margin-left: 20px;
        display: inline-block;
    }

    .aplayer {
        margin: 0;
    }

    .icon-btn {
        font-size: 36px;
        vertical-align: middle;
        cursor: pointer;
    }

    .logo-container {
        line-height: 50px;
        min-width: 400px;
        padding: 0 5px;
    }

    .logo {
        height: 50px;
        width: 50px;
        margin-right: 5px;
        vertical-align: middle;
        display: inline-block;
    }

    .header-nav .title {
        vertical-align: middle;
        font-weight: 600;
        font-size: 20px;
        font-family: "Microsoft YaHei";
        letter-spacing: 3px;
    }

    .user {
        text-align: right;
        float: right;
    }

    .avatar {
        width: 40px;
        height: 50px;
        border-radius: 50%;
        vertical-align: middle;
        display: inline-block;
    }

    .welcome {
        display: inline-block;
        width: auto;
        vertical-align: middle;
        padding: 0 1em;
    }

    .name {
        line-height: 20px;
        text-align: center;
        font-size: 14px;
    }

    .comename {
        font-size: 12px;
    }

    .avatarname {
        /*font-weight: bolder;*/
        font-size: 20px
    }

    .username {
        cursor: pointer;
        margin-right: 20px;
    }

    .el-dropdown {
        color: #fff;
    }

    .btn-fullscreen {
        display: inline-block;
        font-size: 24px;
        vertical-align: middle;
        margin-right: 20px;
        transform: rotate(45deg);
        cursor: pointer;
    }

    .icon-font {
        transform: none;

    }

    a {
        text-decoration: none;
        color: #fff;
    }

    .icon-font i {
        font-size: 20px;
    }

    .userinfo {
        display: inline-block;
    }
</style>
